<template>
  <view>
    <uni-card v-for="(item, index) in posts" :key="item.id">
      <image @click="onClick(item)" slot='cover' style="width: 100%;height: 250px;margin-top: 10px;" :src="item.image"></image>
      <text class="uni-body">{{item.content}}</text>
      <view slot="actions" class="card-actions">
        <view class="card-actions-item" @click="handleLike(item.id)">
          <uni-icons type="hand-up" size="18" color="#999"></uni-icons>
          <text class="card-actions-item-text">点赞</text>
        </view>
        <view class="card-actions-item" @click="handleDislike(item.id)">
          <uni-icons type="hand-down" size="18" color="#999"></uni-icons>
          <text class="card-actions-item-text">点踩</text>
        </view>
        <view class="card-actions-item">
          <uni-icons type="heart" size="18" color="#999"></uni-icons>
          <text class="card-actions-item-text">{{item.likeCount}}</text>
        </view>
      </view>
    </uni-card>
    <uni-fab ref="fab" horizontal="right" vertical="bottom" direction="vertical" :popMenu="false" @fabClick="fabClick"
      :pattern="pattern" />
  </view>
</template>

<script>
  import {
    getAllPosts,
    likePost,
    unlikePost
  } from "@/api/post.js"

  export default {
    components: {},
    data() {
      return {
        pattern: {
          icon: 'compose'
        },
        cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
        posts: [],
        userId: 0,
      }
    },
    onPullDownRefresh() {
      this.refresh()
      uni.stopPullDownRefresh()
    },
    created() {
      this.userId = uni.getStorageSync('userId')
      getAllPosts().then((res) => {
        this.posts = res.data;
      })
    },
    methods: {
      refresh() {
        getAllPosts().then((res) => {
          this.posts = res.data;
        })
      },
      onClick(post) {
        uni.setStorageSync('post',post)
        uni.navigateTo({
          url: '/pages/forum/post'
        })
      },
      actionsClick(text) {
        uni.showToast({
          title: text,
          icon: 'none'
        })
      },
      fabClick() {
        uni.navigateTo({
          url: '/pages/forum/editPost'
        })
      },
      handleLike(postId) {
        likePost(postId, this.userId).then((res) => {
          uni.showToast({
            title: '点赞成功',
            icon: 'none'
          })
        })
      },
      handleDislike(postId) {
        unlikePost(postId, this.userId).then((res) => {
          uni.showToast({
            title: '点踩成功',
            icon: 'none'
          })
        })
      },
    }
  }
</script>


<style lang="scss" scoped>
  .container {
    overflow: hidden;
  }

  .custom-cover {
    flex: 1;
    flex-direction: row;
    position: relative;
  }

  .cover-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: rgba($color: #000000, $alpha: 0.4);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 15px;
    font-size: 14px;
    color: #fff;
  }

  .card-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 45px;
    border-top: 1px #eee solid;
  }

  .card-actions-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .card-actions-item-text {
    font-size: 12px;
    color: #666;
    margin-left: 5px;
  }

  .cover-image {
    flex: 1;
    height: 150px;
  }

  .no-border {
    border-width: 0;
  }
</style>